<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.name" placeholder="查询"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="getUser">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="addUser">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <template>
      <el-table
          ref="multipleTable"
          :data="pageInfo"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column type="index" width="60" label="序号">
        </el-table-column>
        <el-table-column prop="name" label="书名" width="120" sortable>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="120"  sortable>
        </el-table-column>
        <el-table-column prop="author" label="作者" width="120" sortable>
        </el-table-column>
        <el-table-column prop="press" label="出版社" width="120" sortable>
        </el-table-column>
        <el-table-column prop="img" label="封面" width="120" sortable>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template scope="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="toggleSelection()">取消选择</el-button>
        <el-button @click="pachdelete()" type="danger">批量删除</el-button>
      </div>

    </template>

<!--新增/编辑-->
    <el-dialog title="新增&编辑" :visible.sync="addEditFormVisible" :close-on-click-modal="false">
      <el-form :model="addEditForm" label-width="80px" :rules="saveFormRules" ref="addEditForm">
        <el-form-item label="书名" prop="name">
          <el-input v-model="addEditForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="name">
          <el-input v-model="addEditForm.price" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="name">
          <el-input v-model="addEditForm.author" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="出版社" prop="name">
          <el-input v-model="addEditForm.press" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="封面" prop="name">
          <el-input v-model="addEditForm.img" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addEditFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script>
// import {addUser, getUserList} from '../../api/api';
import axios from "axios";

//import NProgress from 'nprogress'
export default {
  data() {
    return {
      filters: {
        keyword: '',
        pageSize:5,
        currentpage:1
      },
      pageInfo:{
        data: [],
        total: 0
      },

      //添加&编辑框
      addEditFormVisible:false, //编辑页面默认关闭
      //编辑框数据
      addEditForm:{
        id:null,
        name:'',//书名
        price:'',//价格
        author:'',//作者
        press:'',//出版社
        img:''//封面
      },
      saveFormRules: {
        name: [
          { required: true, message: "", trigger: 'blur' }
        ]
      },

      loading: false,
      users: []
    }
  },

  methods: {

    //点击编辑
    handleEdit:function (index,row) {
      this.addEditFormVisible = true;
      //将 row 对象的属性复制到 this.addEditForm 对象中
      // Object.assign(target, ...sources) 是JavaScript中的一个方法，用于将一个或多个源对象的属性复制到目标对象中。在这里，目标对象是一个空对象 {}，表示创建一个新的空对象。

  //    row 是源对象，这个对象可能包含一些数据，例如从表格中选择的某一行的数据。

//this.addEditForm 是目标对象，表示一个表单或编辑/添加的数据对象。
      this.addEditForm = Object.assign({},row) //数据回显
    },
    //删除
    handleDel(index,row){
      console.log(index,row,"删除")
      //弹出确认框
      this.$confirm('此操作将永久删除，确认删除吗？','警告',{
        confirmButtonText:'确认删除',
        cancelButtonText:'取消',
        type:'warning'
      }).then(()=>{
        this.$http.delete("/book/"+row.id)
            .then(result =>{
              this.$message({type:'success',message:'删除成功'})
            })
            .catch(row.data.message("删除失败"))
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
        console.log(val, "dada")
        this.multipleSelection = val;

  },

    //获取所有
    getUsers(){
      this.$http.get("/book/getAll")
          .then(res =>{
            res = res.data
            if (res.success){
              this.pageInfo = res.data
              console.log("这个是",this.pageInfo)
            }else{
              console.log("这个是"+res)
              this.$message.error("网络异常请联系管理员");
            }
          })
          .catch(res=>{
            this.$message("网络异常")
          })
    }

  },

  mounted() {
    //进入页面就调用
    this.getUsers();
  },
}

</script>

<style scoped>

</style>
